開始使用前
導入CDN
CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

JS:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

額外JSPopper:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" integrity="sha384-lpyLfhYuitXl2zRZ5Bn2fqnhNAKOAaM/0Kr9laMspuaMiZfGmfwRNFh8HlMy49eQ" crossorigin="anonymous"></script>

容器(Containers):
Bootstrap基本容器，容器寬度填滿，螢幕或視窗寬度改變時，會依照設定的斷點改變寬度，我自己是當成進階版的flex去理解，好處應該是能對手機或平板畫面做更適合的調整，實際操作一次大概就懂了。

      <div class="container" style="background-color:#0780d0;">100% wide until small breakpoint</div>
    <div class="container-sm" style="background-color:#2487CA ;">100% wide until small breakpoint</div>
    <div class="container-md" style="background-color:#146499 ;">100% wide until medium breakpoint</div>
    <div class="container-lg" style="background-color:#128ada ;">100% wide until large breakpoint</div>
    <div class="container-xl" style="background-color:#337fb1 ;">100% wide until extra large breakpoint</div>
    <div class="container-xxl" style="background-color:#32a0e9 ;">100% wide until extra extra large breakpoint</div>
    <div class=".container-fluid" style="background-color:#23a7ff ;">100% wide always</div>

縮放畫面大小觀察差別(快捷 ctrl鍵加上 + 或 - 放大縮小)，使用background color方便檢視。

詳細斷點介紹:https://bootstrap5.hexschool.com/docs/5.0/layout/containers/

網格
row這個bootstrap做好的css，他是一個可換行的flex，且他自己與子box都有邊框調整，總之寬度都是100%填滿，詳情請翻原始檔。
col這個css則是方便用於快速調整中斷點。

最基本的樣式，加了顏色方便看清，使用後可以看到兩個col自動各填滿一半，不用自己設定css真方便。

 <div class="container">
        <div class="row" style="background-color: #dee2e6;">
            <div class="col">
                1 of 2
            </div>
            <div class="col" style="background-color: #cad2d9;">
                2 of 2
            </div>
        </div>
    </div>

而col有很多種樣式去控制它的寬度
最基本的:
.col-" "填1~12去改變它的寬度大小

<div class="container">
        <div class="row">
            <div class="col" style="background-color: #dee2e6;">
                1 of 3
            </div>
            <div class="col-6" style="background-color: aqua;">
                2 of 3 (wider)
            </div>
            <div class="col" style="background-color: #dee2e6;">
                3 of 3
            </div>
        </div>
    </div>

可以看到給了-6的特胖，當然還有".col-sm-" ".col-md-" ".col-lg-" ".col-xl-" ".col-xxl-"理解了運作方式後，就去看看每一種能有什麼作用吧。

詳細網格教學:https://bootstrap5.hexschool.com/docs/5.0/layout/grid/